<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
<script type="text/javascript">
	
	var width = 100;
	var height = 50;
	
	// 每个div间隔的度数，相当于60度
	var angle = Math.PI/3;
	// 圆周半径
	var R = 150;
	// 圆心距离body左边和顶部的距离
	var offsetX = 300;
	var offsetY = 200;
	
	for (var i = 0; i < 6; i ++) {
		
		var div = document.createElement('div');
		document.body.appendChild(div);
		div.style.width = width + 'px';
		div.style.height = height + 'px';
		// h:hue 色调。取值0-360，0(或360)表示红色，120表示绿色，240表示蓝色
		// S：Saturation(饱和度)。取值为：0.0% - 100.0%
		// L：Lightness(亮度)。取值为：0.0% - 100.0%
		div.style.backgroundColor = 'hsl(' + 60 * i+',100%,50%)';
		div.style.borderRadius = '50%';
		div.style.position = 'absolute';
		// 根据正选余弦计算每一个div的坐标
		div.style.top = offsetY + R * Math.sin(angle * i) + 'px';
		div.style.left = offsetX + R * Math.cos(angle * i) + 'px';

		div.style.transform = 'rotate(' +  (i * angle * 180 / Math.PI ) + 'deg)'
		// console.log('rotate(' +  (i * angle / Math.PI * 180) + 'deg)')
		
	}
	
	var divs = document.querySelectorAll('div');
	var initAngle = 0;
	function rotateDiv () {
		// 每次次增加的弧度
		initAngle += 0.02;
		
		for (var i = 0; i < divs.length; i++) {
			divs[i].style.top = offsetY + R * Math.sin(initAngle + angle*i) + 'px';
			divs[i].style.left = offsetX + R * Math.cos(initAngle + angle*i) + 'px';
			divs[i].style.transform = 'rotate(' + (initAngle+i*angle)*180/Math.PI + 'deg)'

		}
		requestAnimationFrame(rotateDiv);
	}
	
	rotateDiv();
	// requestAnimationFrame(rotateDiv);

</script>
</body>
</html>